<script setup>
import {reactive, ref, onMounted} from 'vue';
import router from '@/router'
//import { userStore, tokenStore }  from '../store';
//import userApi from '@/api/userApi';
const activeIndex = ref('1')
// 取出当前登录用户的信息
const loginAdmin = ref({
  name: "已登录",
});
//getLoginAdmin();

// 菜单  用户管理， 分类管理， 商品管理
const menuData = ref([
  {
    name: '影院信息', icon: 'HomeFilled', children: [
      {name: '影院信息管理', icon: 'HelpFilled', path: "/cinema"},
      {name: '影院信息统计', icon: 'HelpFilled', path: "/charts"},
    ]
  },
  {
    name: '影片管理', icon: 'VideoCameraFilled', children: [
      {name: '电影信息管理', icon: 'HelpFilled', path: "/movie"},
      {name: '电影类别管理', icon: 'HelpFilled', path: "/movieCategory"},
    ]
  },
  {
    name: '影厅管理', icon: 'Place', children: [
      {name: '影厅信息管理', icon: 'HelpFilled', path: "/hall"},
      {name: '场次信息管理', icon: 'HelpFilled', path: "/session"},
    ]
  },
  {
    name: '订单管理', icon: 'List', children: [
      {name: '订单信息管理', icon: 'HelpFilled', path: "bill"},
    ]
  },
  {
    name: '用户管理', icon: 'User', children: [
      {name: '用户信息管理', icon: 'HelpFilled', path: "user"},
    ]
  },
  {
    name: '角色权限管理', icon: 'View', children: [
      {name: '角色权限管理', icon: 'HelpFilled', path: "role"},
    ]
  },
]);

function isLogin() {
  const token = sessionStorage.getItem("token");
  if (!token) {
    router.push("/login");
  }
}

// 用户下拉菜单的点击
function handleSelect(key, keyPath) {
  if (key == 'logout') {
    // 用户退出
    logout();
  } else if (key === '1-1') {
    // 修改信息
    updateAdminInfo();
  } else if (key === '1-2') {
    // 新增：跳转到重置密码页面
    goToResetPassword();
  }
}

// 跳转到重置密码页面
function goToResetPassword() {
  router.push('/reset-password');
}

// 左侧菜单动作
function handleMenu(key) {
  if (key) {
    router.push(key);
  }
}

// 修改管理员信息
function updateAdminInfo() {
  // 实际项目中这里应该调用API获取用户信息
  console.log("跳转到修改信息页面");
  router.push('/updateInfo');
}

// 退出
function logout() {
  sessionStorage.removeItem('token');
  router.push('/login');
}

// 左侧菜单展开折叠
const isCollapse = ref(false);

// 在组件挂载时从sessionStorage获取用户信息
onMounted(() => {
  const userData = JSON.parse(sessionStorage.getItem('user') || '{}');
  loginAdmin.value.name = userData.name || loginAdmin.value.name;
});
</script>

<template>
  <div class="common-layout">
    <el-container>
      <el-header class="custom-header">
        <el-menu :default-active="activeIndex"
                 class="el-menu-demo"
                 mode="horizontal"
                 :ellipsis="false"
                 background-color="#f3f7ff"
                 text-color="#393939"
                 active-text-color="#ffd04b"
                 @select="handleSelect">
          <el-menu-item index="0">
            <img style="height: 40px" src="@/static/logo.png" alt="中享思途"/>
            <span
                style="padding-left: 30px; font-size: 28px; color:#393939;font-weight: bold ">吾悦影院管理系统（WY-CINEMA）</span>
            <span style="color:darkred">“吾悦，纵向快乐生活~”</span>
          </el-menu-item>
          <div class="flex-grow"/>
          <el-sub-menu index="1">
            <template #title>
              <el-icon>
                <Stamp></Stamp>
              </el-icon>
              {{ loginAdmin?.name || '未登录' }}
            </template>
            <!-- 修改信息选项（黄色） -->
            <el-menu-item index="1-1" style="color: #e6a23c;">
              <el-icon>
                <Edit/>
              </el-icon>
              修改信息
            </el-menu-item>

            <el-menu-item index="1-2">
              <el-icon>
                <Refresh/>
              </el-icon>
              重置密码
            </el-menu-item>

            <el-menu-item index="logout">
              <el-icon>
                <SwitchButton/>
              </el-icon>
              退出
            </el-menu-item>
          </el-sub-menu>
        </el-menu>
      </el-header>

      <el-container class="content-container">
        <el-aside :width="isCollapse ? '64px' : '250px'">
          <div
              style="height: 40px; display: flex; color:white; align-items: center; padding-left: 20px; font-size: 20px;">
            <el-icon @click="isCollapse=!isCollapse" style="cursor: pointer;">
              <Expand v-if="isCollapse"></Expand>
              <Fold v-else></Fold>
            </el-icon>
          </div>
          <el-menu active-text-color="#ffd04b" background-color="maroon" class="el-menu-vertical-demo"
                   default-active="/charts" text-color="#fff" :collapse="isCollapse"
                   @select="handleMenu">
            <!-- 动态生成菜单 -->
            <el-sub-menu v-for="(menu, index) in menuData" :index="index.toString()">
              <template #title>
                <component
                    class="icons"
                    :is="menu.icon"
                    style="width: 1em; height: 1em; margin-right: 8px; ;color:#f2f2f2; font-size: 20px">
                </component>
                <span style="font-size: 18px">{{ menu.name }}</span>
              </template>
              <el-menu-item v-for="(child, ind) in menu.children" :index="child.path">
                <el-icon>
                  <component
                      :is="child.icon">
                  </component>
                </el-icon>
                <span>{{ child.name }}</span>
              </el-menu-item>
            </el-sub-menu>
          </el-menu>
        </el-aside>

        <el-main class="main-content">
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<style scoped>
.flex-grow {
  flex-grow: 1;
}

.common-layout {
  height: 100vh;
  display: flex;
  flex-direction: column;
}

.custom-header {
  height: 65px !important;
  padding: 0;
  line-height: 60px;
}

.el-menu--horizontal {
  height: 65px;
}

.content-container {
  flex: 1;
  display: flex;
  overflow: hidden;
}

.el-aside {
  background-color: maroon;
  height: 100%;
  overflow-y: auto;
}

.main-content {
  flex: 1;
  padding: 0px;
  background: whitesmoke;
  background-size: cover;
  overflow-y: auto;
}

.el-menu {
  border-width: 0px;
}

.el-menu-item {
  font-size: 16px; /* 增大二级菜单字体 */
  padding-left: 50px !important;
}

/* 下拉菜单样式调整 */
.el-sub-menu__title {
  font-size: 16px;
  padding: 0 20px;
}

.el-menu-item {
  min-width: 140px;
}

.el-menu-demo {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
}
</style>